<template>
  <header class="login-header">
    <div class="logo-box">
      <img src="@/assets/logo.png" class="logo" />
      <span>{{ t('common.systemname') }}</span>
    </div>
    <t-dropdown trigger="click">
      <t-button theme="default" shape="square" variant="text">
        <translate-icon />
      </t-button>
      <t-dropdown-menu>
        <t-dropdown-item
          v-for="(lang, index) in langList"
          :key="index"
          :value="lang.value"
          @click="(options) => changeLang(options.value as string)"
          >{{ lang.content }}</t-dropdown-item
        ></t-dropdown-menu
      >
    </t-dropdown>
  </header>
</template>

<script setup lang="ts">
import { TranslateIcon } from 'tdesign-icons-vue-next';

import { langList, t } from '@/locales/index';
import { useLocale } from '@/locales/useLocale';
// 切换语言
const { changeLocale } = useLocale();
const changeLang = (lang: string) => {
  changeLocale(lang);
};
</script>

<style lang="less" scoped>
.login-header {
  padding: 0 var(--td-comp-paddingLR-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  color: var(--td-text-color-primary);
  height: var(--td-comp-size-xxxl);

  .logo-box {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .logo {
    width: 30px;
    height: 30px;
  }
}
</style>
